import { IBufferInfo, WebglBase } from "./WebglBase";

/*
 * @Author: Snow
 * @Date: 2021-09-05 20:02:21
 * @Description: 
 */
export class Webgl2DBase extends WebglBase{

    public aPositionLoc:number;

    public uColorLoc:WebGLUniformLocation;

    public uResolutionLoc:WebGLUniformLocation;

    public override initUITools():void{
        //super.initUITools();
        this.createSlider("red",{value: 1, slide: this.onUpateSlide(this,"red"), min: 0, max: 1, step: 0.01, precision: 2})
        this.createSlider("green",{value: 0, slide: this.onUpateSlide(this,"green"), min: 0, max: 1, step: 0.01, precision: 2})
        this.createSlider("blue",{value: 0, slide: this.onUpateSlide(this,"blue"), min: 0, max: 1, step: 0.01, precision: 2})
        this.createSlider("alpha",{value: 1, slide: this.onUpateSlide(this,"alpha"), min: 0, max: 1, step: 0.01, precision: 2})
        this.uiParam = {red:1,green:0,blue:1,alpha:1};
    }

    public override initGLSL():void{
        this.vsSource = `
            attribute vec2 aPosition;
            
            uniform vec2 uResolution;
            
            uniform mat4 uModelViewMatrix;
            uniform mat4 uProjectionMatrix;
            uniform mat4 uViewMatrix;

            //varying lowp vec4 vColor;

            void main() {
                // 从像素坐标转换到 0.0 到 1.0
            vec2 zeroToOne = aPosition / uResolution;
        
            // 再把 0->1 转换 0->2
            vec2 zeroToTwo = zeroToOne * 2.0;
        
            // 把 0->2 转换到 -1->+1 (裁剪空间)
            vec2 clipSpace = zeroToTwo - 1.0;
        
            gl_Position = vec4(clipSpace, 0, 1);
            }
        `;
        
        this.fsSource = `
            precision mediump float;
            uniform vec4 uColor;
            void main() {
                gl_FragColor = uColor;
            }
        `;
    }

    public override initProgramInfo():any{
        this.aPositionLoc = this.gl.getAttribLocation(this.shaderProgram,"aPosition");
        
        this.uColorLoc = this.gl.getUniformLocation(this.shaderProgram,"uColor");
        
        this.uResolutionLoc = this.gl.getUniformLocation(this.shaderProgram,"uResolution");

        return null;
    }

    public override initBuffer():IBufferInfo{

        return null;
    }

    public override draw():void{
        const gl = this.gl;
        gl.viewport(0,0,gl.canvas.width,gl.canvas.height);
        gl.clearColor(1,1,1,1);
        gl.clearDepth(1.0);
		gl.enable(gl.DEPTH_TEST);
		gl.depthFunc(gl.LEQUAL);
		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        const pos:number[] = [
            100,100,
            200,100,
            100,200,
            200,200,
            200,100,
            100,200,
        ];

        const posBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER,posBuffer);
        gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(pos),gl.STATIC_DRAW);
        gl.enableVertexAttribArray(this.aPositionLoc);
        {
            gl.vertexAttribPointer(this.aPositionLoc,2,gl.FLOAT,false,0,0);
        }

        //顶点
        const indexs = [
            0,1,2,1,2,3
        ];

        const indexsBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexsBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,new Uint16Array(indexs),gl.STATIC_DRAW);


        gl.useProgram(this.shaderProgram);

        const resolution:number[] = [
            gl.canvas.width,gl.canvas.height,
        ]

        gl.uniform2fv(this.uResolutionLoc,new Float32Array(resolution));
        
        let red = this.uiParam["red"];
        let green = this.uiParam["green"];
        let blue = this.uiParam["blue"];
        let alpha = this.uiParam["alpha"];

        gl.uniform4fv(this.uColorLoc,new Float32Array([red,green,blue,alpha]));

        //gl.drawArrays(gl.TRIANGLES,0,6);
        gl.drawElements(gl.TRIANGLES,6,gl.UNSIGNED_SHORT,0);
    }

}